import React, { useEffect, useState, useCallback } from "react";
import { useLocation, Route, useHistory } from "react-router-dom";
import Permissionsnav from "../../component/permissionsnav";
import Permissionsearch from "../../component/permissionsearch"; //搜索
import style from "../../style/permisscontent.module.scss";
import { renderRoutes } from "react-router-config";
import { getall, stop, del } from "../../api/addpart";
import moment from "moment";
const Departmentmanage = (props) => {
  const [routes, setroutes] = useState();
  const [list, setlist] = useState();
  // const [search, setsearch] = useState({});
  const loacltion = useLocation();
  const history = useHistory();
  const route =
    loacltion.pathname.split("/")[loacltion.pathname.split("/").length - 1];
  //获取所有部门
  const getdepart = useCallback(async () => {
    let res = await getall();
    console.log(res);
    setlist(res.data.data);
    localStorage.setItem("list", JSON.stringify(res.data.data));
    return res.data.data;
  }, []);
  // const [routes, setroutes] = useState();
  // const [list] = useState(() => getdepart());
  useEffect(() => {
    setroutes(route);
    getdepart();
  }, [route, getdepart]);
  const getlist = useCallback((list) => {
    console.log(list);
    setlist(list);
  }, []);
  const stopAction = useCallback(
    async (e, id) => {
      console.log(e.target.getAttribute("goodsid"), id);
      if (id === 0) {
        id = 1;
      } else {
        id = 0;
      }
      await stop({ id: e.target.getAttribute("goodsid"), type: id });
      getdepart();
    },
    [getdepart]
  );
  const deleteAction = useCallback(
    async (e) => {
      console.log(e.target.getAttribute("goodsid"));
      await del({ id: e.target.getAttribute("goodsid") });
      getdepart();
    },
    [getdepart]
  );
  const gofixed = useCallback(
    async (e) => {
      console.log(e.target.getAttribute("goodsid"));
      console.log(history);
      history.push(
        `/permissions/departmentmanage/adddepartment/?id=${e.target.getAttribute(
          "goodsid"
        )}&text=编辑部门`
      );
    },
    [history]
  );
  return (
    <div className={style.Box}>
      <Route
        exact
        path="/permissions/departmentmanage"
        component={() => {
          return (
            <>
              <Permissionsnav route={routes}></Permissionsnav>
              <Permissionsearch
                value={"部门名称"}
                text={"添加部门"}
                route={"adddepartment"}
                type={"partment"}
                tolist={getlist}
              ></Permissionsearch>
              <table className={style.department}>
                <thead>
                  <tr>
                    <th>部门名称</th>
                    <th>创建时间</th>
                    <th>部门人员</th>
                    <th>启用状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {list?.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td style={{ width: "195px" }}>{item.name}</td>
                        <td style={{ width: "301px" }}>
                          {moment(Number(item.time)).format(
                            "YYYY-MM-DD HH:mm:ss"
                          )}
                        </td>
                        <td style={{ width: "160px" }}>查看</td>
                        <td style={{ width: "233px" }}>
                          {item.type === 1 ? "已启用" : "已停用"}
                        </td>
                        <td style={{ width: "168px" }}>
                          <span
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => stopAction(e, item.type)}
                          >
                            {item.type === 1 ? "停用" : "启用"}
                          </span>{" "}
                          <sapn
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => deleteAction(e)}
                          >
                            删除
                          </sapn>{" "}
                          <span
                            goodsid={item._id}
                            style={{ cursor: "pointer" }}
                            onClick={(e) => gofixed(e)}
                          >
                            编辑
                          </span>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </>
          );
        }}
      />
      {renderRoutes(props.route.routes)}
    </div>
  );
};

export default Departmentmanage;
